<template>
  <!-- 大盒子 -->
  <div class="MedicenCata">
    <!--  描述  -->
    <div class="header">
      <div class="header-icon">
        <i class="el-icon-byj"
           style="border-radius: 50%;font-size: 20px;padding: 6px;margin-left: 8px;background-color: #409EFF;color: #fff;"></i>
        <span style="font-size: 12px;font-weight:400;margin-left: 12px;">聚合支付</span>
        <!--        <div class="feetbtn">
                  <el-button v-for="(v,i) in feetBtn" :key="i" :type="v.type" :loading="loading" :icon="v.icon" size="small"
                             plain @click="feetHandClick(v)">{{ v.label }}
                  </el-button>
                </div>-->
      </div>
    </div>
    <!-- 主体内容 -->
    <div class="main">

      <!-- right -->
      <div class="main-right" ref="mainRight">
        <!-- tit -->
        <div class="main-icon" style="display: flex; align-items: center; padding: 12px 16px; background: #fff; border-bottom: 1px solid #ebeef5;">

          <!-- 搜索框 -->
          <div style="display: flex; align-items: center; margin-right: 12px;">
            <span style="font-size: 13px; color: #606266; font-weight: 500; margin-right: 8px;">关键字：</span>
            <el-input
                size="mini"
                clearable
                placeholder="诊所名称"
                v-model="queryConditionForm.name"
                @keyup.enter.native="handleConditionQuery"
                style="width: 180px;">
            </el-input>
          </div>

          <!-- 日期范围选择器 -->
          <div style="display: flex; align-items: center; margin-right: 12px;">
            <el-date-picker
                size="mini"
                v-model="queryConditionForm.timeFrameArr"
                type="datetimerange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleConditionQuery"
                :picker-options="pickerOptions"
                style="width: 360px;">
            </el-date-picker>
          </div>

          <!-- 按钮组 -->
          <div style="display: flex; align-items: center; gap: 8px;">
            <el-button
                v-for="(v,i) in headerBtn"
                :key="i"
                :type="v.type"
                :loading="loading"
                :icon="v.icon"
                size="mini"
                @click="handClick(i)">
              {{ v.title }}
            </el-button>
          </div>
        </div>
        <!-- table -->
        <div class="table">
          <el-table :data="tableData" border  @row-dblclick="handleDbShowData">
            <el-table-column v-for="(col, inx) in tableRows" :key="inx" :type="col.type" :prop="col.prop"
                             :label="col.name" header-align="center" :render-header="labelHead"
                             :min-width="getColumnWidth(col.label,col.prop,tableData)">

              <template #default="{ row }">
                {{ safeGetMappedValue(col, row) }}
              </template>
            </el-table-column>
            <!-- fixed -->
            <el-table-column fixed="left" label="行号" type="index"></el-table-column>
            <el-table-column fixed="right" label="操作" width="300">
              <template slot-scope="scope">
                <div class="editbox" style="text-align: center;">
                  <el-button type="warning" @click="handleEditOnCredit(scope.row)" size="mini">编辑</el-button>
                  <el-button type="success" @click="handleActivateUserKey(scope.row)" size="mini">激活</el-button>
                  <el-button type="primary" @click="handleSignInUser(scope.row)" size="mini">签到</el-button>
                  <el-button :type="scope.row.state === 1 ? 'danger' : 'success' "
                             @click="handleStartOrDisabled(scope.row)" size="mini">
                    {{ scope.row.state === 1 ? '禁用' : '启用' }}
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-dialog
            :title="addSqbUserKeysForm.id ? '修改商户密钥' : '新增商户密钥'"
            :visible.sync="sqbUserKeysFormDialogVisible"
            width="50%"
            @close="handleCloseAddorEditUserKey"
            class="custom-form-dialog"
        >
          <el-form
              size="mini"
              :model="addSqbUserKeysForm"
              ref="addSqbUserKeysForm"
              :rules="addSqbUserKeysFormRules"
              label-width="120px"
              label-position="right"
              :disabled="showSqbUserKeysFormDialogVisible"
          >
            <!-- 第一行：应用编号 + 终端名称 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="应用编号:" prop="appId" class="no-wrap-label">
                  <el-input v-model="addSqbUserKeysForm.appId" placeholder="如：HT20230001" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="终端名称:" prop="name" class="no-wrap-label">
                  <el-input v-model="addSqbUserKeysForm.name" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第二行：终端编号 + 设备序列号 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="终端编号:" prop="clientSn" class="no-wrap-label">
                  <el-input v-model="addSqbUserKeysForm.clientSn" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备序列号:" prop="deviceId" class="no-wrap-label">
                  <el-input v-model="addSqbUserKeysForm.deviceId" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 第三行：激活码 + 服务商密钥 -->
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="激活码:" prop="code" class="no-wrap-label">
                  <el-input v-model="addSqbUserKeysForm.code" clearable/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="服务商密钥:" prop="vendorKey" class="no-wrap-label">
                  <el-input v-model="addSqbUserKeysForm.vendorKey" clearable/>
                </el-form-item>
              </el-col>
            </el-row>

            <!-- 单行：服务商序列号 -->
            <el-form-item label="服务商序列号:" prop="vendorSn" class="no-wrap-label">
              <el-input
                  v-model="addSqbUserKeysForm.vendorSn"
                  class="disabled-input"
              />
            </el-form-item>

            <!-- 设备信息（文本域） -->
            <el-form-item label="设备信息:" prop="osInfo" class="no-wrap-label">
              <el-input
                  type="textarea"
                  v-model="addSqbUserKeysForm.osInfo"
                  :rows="3"
                  resize="none"
                  show-word-limit
                  maxlength="200"
              />
            </el-form-item>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCloseAddorEditUserKey">取消</el-button>
            <el-button type="primary" @click="handleAddorEditUserKey">保存</el-button>
          </div>
        </el-dialog>

      </div>
    </div>

    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[8, 16, 24]"
        :page-size="pageSize"
        :total="totalSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
    >
    </el-pagination>
  </div>
</template>

<script>
import {getContractDeptList} from "@/api/contractDept/contractDept";
import {costnametablePage} from "@/api/Outpatient/chargingPrice";
import AddType from "@/views/reservation/reservationAddType";
import {pinyin} from "pinyin-pro";
import {addContractUnit, editContractUnit, getContuntList, getDeptList} from "@/api/reservation/reservation";
import {
  getBeforeHistoryTemplate,
  getComplaintemplate, getNowHistoryTemplate,
} from "@/api/reservation/caseHistoryTemplate";
import {
  addBeforeHistoryTemplate,
  addComplainTemplate,
  addNowHistoryTemplate, editBeforeHistoryTemplate, editComplainTemplate, editNowHistoryTemplate,
  getComplainTemplate,
} from "@/api/reservation/outpatientPhysician";
import {getDoctorList} from "@/api/scheduling/scheduling";
import {getOnCredit} from "@/api/reservation/onCredit";
import {addOnCredit, editOnCredit} from "@/api/reservation/outpatientCharge";
import {
  activateSqbUserKeys,
  addSqbUserKeys,
  editSqbUserKeys,
  getSqbmanageList, signInSqbUserKeys
} from "@/api/thirdpartyPayment/thirdpartyPayment";
import dayjs from "dayjs";
import {getAllUser} from "@/api/user";

export default {
  inject: ['reload'], // 无痕刷新
  components: {},
  data() {
    return {
      //时间框
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

      // 树菜单Props
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // str
      windowWidth: '', //右侧表格动态宽度
      searchValue: '',
      beginTime: '',
      endTime: '',
      CatalogueName: '聚合支付',
      DropDownedName: '全部',
      state: null,
      iconComes: 'el-icon-byj',

      //模态框控制
      loading: false,
      sqbUserKeysFormDialogVisible: false,
      showSqbUserKeysFormDialogVisible: false,

      //分页参数
      pageNum: 1,
      pageSize: 8,
      totalSize: 10,

      //下拉框
      contractUnitOption: [],//合约单位
      stateOption: [{id: 0, label: '禁用'}, {id: 1, label: '可用'}],
      userOptions: [],

      //表单验证
      addSqbUserKeysFormRules: {
        appId: [
          {required: true, message: '应用编号不能为空', trigger: 'blur'},
        ],
        clientSn: [
          {required: true, message: '终端编号不能为空', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在6到20个字符之间'}
        ],
        code: [
          {required: true, message: '激活码不能为空', trigger: 'blur'},
        ],
        deviceId: [
          {required: true, message: '设备序列号不能为空', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '终端名称不能为空', trigger: 'blur'},
          {min: 2, max: 50, message: '长度在2到50个字符之间'}
        ],
        vendorKey: [
          {required: true, message: '服务商密钥不能为空', trigger: 'blur'},
        ],
        vendorSn: [
          {required: true, message: '服务商序列号不能为空', trigger: 'blur'}
        ]
      },

      //表单容器
      addSqbUserKeysForm: {
        id: null,
        appId: '',//应用编号
        clientSn: '',//客户方终端编号
        code: '',//激活码
        deviceId: '',//客户方收银终端序列号
        name: '',//客户方终端名称
        osInfo: '',//设备信息
        vendorKey: '',//服务商密钥
        vendorSn: '',//服务商序列号
      },
      queryConditionForm: {
        name: '',
        timeFrameArr: [],
      },

      //表格容器
      tableData: [],

      //动态按钮
      headerBtn: [
        {search: "search", title: "搜索", type: "success", style: {marginLeft: "-20px"}},
        {add: "add", title: "新增", type: "warning"},
      ],
      //侧边树
      elTree: [
        {label: '全部', path: '', title: '', icon: 'el-icon-news', children: [],},
      ],

      //动态列容器
      tableRows: [
        {name: "应用编号", prop: "appId"},
        {name: "诊所序号", prop: "clinicId"},
        {name: "诊所名称", prop: "clinicName"},
        {name: "状态", prop: "status"},
        {name: "客户方终端编号", prop: "clientSn"},
        {name: "客户方终端名称", prop: "name"},
        {name: "客户方收银终端序列号", prop: "deviceId"},
        {name: "激活码", prop: "code"},
        {name: "设备信息", prop: "osInfo"},
        {name: "终端号", prop: "terminalSn"},
        {name: "终端密钥", prop: "terminalKey"},
        {name: "服务商号", prop: "vendorSn"},
        {name: "服务商密钥", prop: "vendorKey"},
        {name: "操作人", prop: "createId", op: 'userOptions'},
        {name: "创建时间", prop: "createTime"},
        {name: "修改人", prop: "updateId", op: 'userOptions'},
        {name: "修改时间", prop: "updateTime"},
      ],


      areaOption: [{id: 1, label: '省内'}, {id: 2, label: '省外'}, {id: 3, label: '进口'}],


    };
  },
  mounted() {
    this.loadData();
    this.getAllUser();
    this.$nextTick(() => {
      this.updateWindowWidth();
      window.addEventListener('resize', this.updateWindowWidth);
    })
  },
  methods: {
    async handleActivateUserKey(row) {
      try {
        // 添加确认弹窗
        await this.$confirm(`是否激活${row.clinicName}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        const res = await activateSqbUserKeys({ id: row.id });
        if (res.code === 200) {
        } else {
          throw new Error(res.message || "激活失败，请重试！");
        }
      } catch (error) {
        // 如果用户点击了取消，不报错
        if (error !== 'cancel') {
          this.$message.error("系统异常:激活失败，请重试! 请联系管理员!!!");
        }
      }
    },

    async handleSignInUser(row) {
      try {
        // 添加确认弹窗
        await this.$confirm(`是否签到${row.clinicName}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        const res = await signInSqbUserKeys({ id: row.id });
        if (res.code === 200) {
          this.loadData();
        } else {
          throw new Error(res.message || "签到失败，请重试！");
        }
      } catch (error) {
        // 如果用户点击了取消，不报错
        if (error !== 'cancel') {
          this.$message.error("系统异常:签到失败，请重试! 请联系管理员!!!");
        }
      }
    },

    async handleConditionQuery() {
      const res = await getSqbmanageList({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        name: this.queryConditionForm.name,
        startTime: this.queryConditionForm.timeFrameArr?.[0] ?? null,
        endTime: this.queryConditionForm.timeFrameArr?.[1] ?? null
      });
      if (res.code === 200) {
        this.tableData = res.data.content;
        this.totalSize = res.data.totalSize;
      }

    },


    //修改
    async handleEditOnCredit(row) {
      this.addSqbUserKeysForm = {...row};
      console.log(this.addSqbUserKeysForm, 'this.addSqbUserKeysFormthis.addSqbUserKeysFormthis.addSqbUserKeysForm')
      this.sqbUserKeysFormDialogVisible = true;
    },

    //新增修改
    async handleAddorEditUserKey() {
      try {
        // 验证表单
        const valid = await this.$refs.addSqbUserKeysForm.validate();
        if (!valid) {
          this.$message.warning('请完善表单信息');
          return false;
        }

        let res;
        // 判断是新增还是编辑
        if (this.addSqbUserKeysForm.id) {
          // 有id -> 编辑操作
          res = await editSqbUserKeys(this.addSqbUserKeysForm);
        } else {
          // 无id -> 新增操作
          res = await addSqbUserKeys(this.addSqbUserKeysForm);
        }

        // 统一处理响应
        if (res.code === 200) {
          this.handleCloseAddorEditUserKey();
          await this.loadData();
        } else {
          this.$message.error(res.message || '操作失败');
        }
      } catch (error) {
        console.error('操作失败:', error);
        this.$message.error('操作失败，请重试');
      }
    },

    //合约单位下拉框
    async getContuntList() {
      if (this.contractUnitOption.length > 0) return;
      const res = await getContuntList();
      this.contractUnitOption = res.data.map(item => {
        return {id: item.id, label: item.name}
      })
    },

    //关闭模态框清空数据
    handleCloseAddorEditUserKey() {
      this.addSqbUserKeysForm = {};
      this.$nextTick(() => {
        this.$refs.addSqbUserKeysForm.clearValidate();
      });
      this.sqbUserKeysFormDialogVisible = false;
    },

    //科室下拉框
    async getDeptList() {
      const res = await getDeptList()
      this.deptOptions = res.data.map(item => {
        return {id: item.id, label: item.deptName}
      })
    },

    //医生下拉框
    async getDoctorList() {
      const res = await getDoctorList()
      this.doctorOptions = res.data.map(item => {
        return {id: item.id, label: item.fullName}
      })
    },

    //医生下拉框
    async getAllUser() {
      const res = await getAllUser({
        pageSize: 100,
        pageNum: 1,
      })
      this.userOptions = res.data.content.map(item => {
        return {id: item.userId, label: item.username}
      })
    },

    //启用禁用
    async handleStartOrDisabled(row) {
      try {
        // 确认弹框
        const confirmMessage = row.state === 1 ? `确定要禁用${row.name}吗？` : `确定要启用${row.name}吗？`;
        const confirmResult = await this.$confirm(confirmMessage, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(() => {
          return false;
        });

        // 如果用户点击取消，直接返回
        if (!confirmResult) return;

        // 执行状态修改
        this.addOnCreditForm = row;
        this.addOnCreditForm.state = row.state === 1 ? 0 : 1;
        const res = await editOnCredit(this.addOnCreditForm);
        if (res.code === 200) {
          await this.loadData();
        } else {
          this.$message.error(`修改${this.addOnCreditForm.name}状态失败`);
        }
      } catch (error) {
        console.error('操作失败:', error);
        this.$message.error('操作过程中发生错误');
      }
    },

    //双击查看的当前行信息
    handleDbShowData(row) {
      this.addOnCreditForm = row;
      this.sqbUserKeysFormDialogVisible = true;
      this.showSqbUserKeysFormDialogVisible = true;
    },

    //表格字段映射
    safeGetMappedValue(col, row) {
      // 1. 检查数据有效性
      const rawValue = row[col.prop];
      if (rawValue === null || rawValue === undefined) return ' ';

      // 2. 检查映射数组
      const mapArray = this[col.op];
      if (!col.op || !Array.isArray(mapArray)) return rawValue;

      // 3. 执行映射
      const matched = mapArray.find(item => item.id === rawValue);
      return matched?.label || rawValue;
    },

    //数据源
    async loadData() {
      const res = await getSqbmanageList({pageNum: this.pageNum, pageSize: this.pageSize});
      if (res.code === 200) {
        this.totalSize = res.data.totalSize;
        this.tableData = res.data.content.map(item => {
          return {
            ...item,
            createTime: dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss'),
            updateTime: item.updateTime === null ? null : dayjs(item.updateTime).format('YYYY-MM-DD HH:mm:ss'),
          }
        })
        await this.getContuntList();
      } else {
        this.$message.error(`系统异常`)
      }
    },

    //侧边树(全部)按钮
    handleNodeClick(data, e) {
      this.searchValue = '';
      this.loadData()
    },

    //动态计算列宽
    columnWidth(col, list) {
      let prop = col.prop, lab = col.lab;
      let width = 40; // 设定一个最小值
      let maxlenStr = ""; // 最长字符串
      for (let info of list) {
        if (maxlenStr < (info[prop] + "").length) maxlenStr = info[prop];
      }
      width = Math.max(width, len(lab), len(maxlenStr));
      // 表格自带的内边距(20px) 自调
      return width + 12; // 这里加了 12px
      function len(str) {
        // 实际分配长度可根据需要自行调整
        let length = 8;
        for (const char of str + "") {
          // 英文小写字符 8px
          if ("a" <= char && char <= "z") length += 8;
          // 英文大写字符 8px
          else if ("A" <= char && char <= "Z") length += 8;
          // 中文字符 28px
          else if (char >= "\u4e00" && char <= "\u9fa5") length += 32;
          // 其他 8px
          else length += 12;
        }
        return length;
      }
    },

    // 步骤
    async handClick(i) {
      switch (i) {
        case 0:
          await this.handleConditionQuery();
          break;
        case 1:
          await this.getContuntList();
          this.sqbUserKeysFormDialogVisible = true;
          break;
      }
    },

    //状态查询
    async handleCommand(command) {

    },

    // 实时宽度
    updateWindowWidth() {
      this.windowWidth = window.innerWidth - 328;
    },

    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.loadData();
    },
    getColumnWidth(label, prop, tableData) {
      const minWidth = 80;
      const padding = 20; // 增加边距缓冲
      const contentList = tableData.map(item => item?.[prop] ?? '');

      // 计算所有内容宽度（包括表头）
      const widths = [...contentList, label].map(text => {
        const str = String(text || '');
        return this.getTextWidth(str) + padding;
      });

      return Math.max(minWidth, ...widths);
    },

    // 精确计算文本宽度（使用Canvas）
    getTextWidth(text, fontSize = 14) {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      ctx.font = `${fontSize}px Microsoft YaHei`;
      return ctx.measureText(text).width;
    },

    labelHead(h, {column, $index}) {
      let l = column.label.length;
      let f = 12;
      column.minWidth = f * (l + 5); //加上一个文字长度
      return h("div", {class: "table-head", style: {width: "100%"}}, [
        column.label,
      ]);
    },
  }
}
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  padding: 18px;
  background-color: #007bb0;
}

/deep/ .el-dialog__title {
  font-size: 18px;
  color: #fff;
}

/deep/ .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

.dialog {
  .showDialog {
    .tabs {
      /deep/ .el-select > .el-input {
        width: 172px;
      }

      /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 172px;
      }

      /deep/ .el-form-item__content {
        display: flex;

        span {
          font-size: 12px;
        }
      }

      .oneLine {
        width: 524px;
        // background-color: indianred;
      }
    }

    /deep/ .el-dialog__title {
      font-size: 15px;
    }

    /deep/ .el-table {
      font-size: 15px;
    }
  }
}


// content
.MedicenCata {
  height: 100%;
  width: 100%;
  // header
  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 40px;
    background-color: #efefef;
    padding: 4px;

    // justify-content: space-evenly;
    // icon
    .header-icon {
      display: flex;
      align-items: center;
    }

    .feetbtn {
      display: flex;
      justify-content: center;
      margin-left: 12px;
    }
  }

  // main
  .main {
    width: 100%;
    display: flex;
    justify-content: space-between;
    // height: 473px; /* 设置父容器的高度 */
    // overflow-y: auto; /* 当内容超出容器高度时显示垂直滚动条 */
    // left
    .main-left {
      .custom-tree {
        max-height: 100%; /* 设置树形菜单的最大高度为父容器的100% */
        overflow-y: auto; /* 当内容超出设定高度时显示滚动条 */
      }

      /deep/ .el-tree-node__content {
        // height: 40px;
        // padding-right: 8px !important;
      }

      /deep/ .el-tree-node__label {
        font-size: 12px;
      }

      width: 128px;
      height: 100%;
    }

    // right
    .main-right {
      flex: 1;
      width: 100%;
      height: 100%;
      // alert
      .addmessagesBox {
        .tabs {
          /deep/ .el-select > .el-input {
            width: 172px;
          }

          /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner {
            width: 172px;
          }

          /deep/ .el-form-item__content {
            display: flex;

            span {
              font-size: 12px;
            }
          }

          .oneLine {
            width: 524px;
            // background-color: indianred;
          }
        }

        /deep/ .el-dialog__title {
          font-size: 12px;
        }

        /deep/ .el-table {
          font-size: 12px;
        }

      }

      // icon
      .main-icon {
        display: flex;
        align-items: center;
        padding: 12px;
        line-height: 40px;

        .main-icon-a {
          // width: 240px;
          // background-color: #00557f;
        }

        .main-icon-b {
          margin-left: 28px;

          /deep/ .el-dropdown {
            font-size: 12px;
            cursor: pointer;
          }

          /deep/ .el-dropdown:hover {
            font-weight: bold;
            color: #66b1ff;
          }

          /deep/ .el-icon--right {
            // background-color: #66b1ff;
          }

          /deep/ .el-popper[x-placement^=bottom] {
            margin-top: 0;
          }
        }

        // c
        .main-icon-c {
          display: flex;
          margin-left: 28px;

          /deep/ [data-v-2bacc09b] .el-color-picker__icon, .el-input[data-v-2bacc09b], .el-textarea[data-v-2bacc09b] {
            width: 80%;
          }
        }
      }

      // table
      /deep/ .el-table .cell {
        font-size: 12px;
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div :first-child {
        text-align: center;
      }

      /deep/ .el-table td.el-table__cell div {
        text-align: center;
        overflow: hidden;
        white-space: normal;
        word-break: break-all;
      }

      .table {

      }
    }
  }

  // addModel
  .addModel {
    margin-left: 12px;

    /deep/ .el-dialog__header {
      padding: 12px;
      line-height: 28px;
      background-color: #007bb0;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 12px;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close:hover {
      background-color: brown;
    }

    /deep/ .el-form-item__label {
      font-size: 12px;
    }
  }

  .editModel {
    /deep/ .el-dialog__header {
      padding: 12px;
      line-height: 28px;
      background-color: #007bb0;
    }

    /deep/ .el-dialog__title {
      color: #fff;
      font-size: 12px;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
      color: #fff;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close:hover {
      background-color: brown;
    }

    /deep/ .el-form-item__label {
      font-size: 12px;
    }
  }

  // feet
  .feet {
    padding: 12px;

  }

}
</style>